Skip to content

feat(root): development workflow for all components#2295

Merged
gabrielmfern merged 29 commits intocanaryfrom
feat/new-development-workflow-for-components
Jul 1, 2025
Merged

feat(root): development workflow for all components#2295
gabrielmfern merged 29 commits intocanaryfrom
feat/new-development-workflow-for-components

Conversation

@gabrielmfern
Copy link
Member

@gabrielmfern gabrielmfern commented Jun 11, 2025 •
edited
Loading

This pull request adds a new package to the repository called playground that runs with the React Email's CLI directly and lets us write down any email template for testing, and also sets it up so that the hot reloading of email dev is triggered by changes to any of the components.

It also renames dev scripts on components to build:watch to avoid any confusion for contributors, with also removing the root dev script which was meant for doing an equivalent, but less optimized, development workflow for components.

The best side to this workflow is that it lets you copy over any email template and just experiment with things without having to worry about what to commit as everything is ignored. The other good thing is that it lets contributors play with multiple components at once.

It does not have any seeding because the good side to seeding would be to make sure a certain thing still works, and it is much better for us to do that through automated tests with vitest.

Development workflow

  1. Create new file at playground/emails/testing.tsx with the contents 
    import { Html, Head, Body, Tailwind, Text } from '@react-email/components';

export default function Testing() {
  return <Tailwind>
    <Html>
      <Head/>

      <Body className="bg-black text-white">
        <Text className="m-0 my-4 bg-cyan-200 text-slate-800">
          This is a testing email template.
        </Text>
      </Body>
    </Html>
  </Tailwind>;
}
  2. Run pnpm dev in playground
  3. Open http://localhost:3000
  4. Make a change to the source of any component
  5. See change hot reloaded into email template

@gabrielmfern gabrielmfern self-assigned this Jun 11, 2025
@changeset-bot
Copy link

changeset-bot bot commented Jun 11, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 939f4c3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link

vercel bot commented Jun 11, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-email ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 30, 2025 2:39pm
react-email-demo ❌ Failed (Inspect) Jun 30, 2025 2:39pm

@pkg-pr-new
Copy link

pkg-pr-new bot commented Jun 11, 2025 •
edited
Loading

Open in StackBlitz

@react-email/body

npm i https://pkg.pr.new/resend/react-email/@react-email/body@2295

@react-email/button

npm i https://pkg.pr.new/resend/react-email/@react-email/button@2295

@react-email/code-block

npm i https://pkg.pr.new/resend/react-email/@react-email/code-block@2295

@react-email/code-inline

npm i https://pkg.pr.new/resend/react-email/@react-email/code-inline@2295

@react-email/column

npm i https://pkg.pr.new/resend/react-email/@react-email/column@2295

@react-email/components

npm i https://pkg.pr.new/resend/react-email/@react-email/components@2295

@react-email/container

npm i https://pkg.pr.new/resend/react-email/@react-email/container@2295

@react-email/font

npm i https://pkg.pr.new/resend/react-email/@react-email/font@2295

@react-email/head

npm i https://pkg.pr.new/resend/react-email/@react-email/head@2295

@react-email/heading

npm i https://pkg.pr.new/resend/react-email/@react-email/heading@2295

@react-email/hr

npm i https://pkg.pr.new/resend/react-email/@react-email/hr@2295

@react-email/html

npm i https://pkg.pr.new/resend/react-email/@react-email/html@2295

@react-email/img

npm i https://pkg.pr.new/resend/react-email/@react-email/img@2295

@react-email/link

npm i https://pkg.pr.new/resend/react-email/@react-email/link@2295

@react-email/markdown

npm i https://pkg.pr.new/resend/react-email/@react-email/markdown@2295

@react-email/preview

npm i https://pkg.pr.new/resend/react-email/@react-email/preview@2295

react-email

npm i https://pkg.pr.new/resend/react-email@2295

@react-email/render

npm i https://pkg.pr.new/resend/react-email/@react-email/render@2295

@react-email/row

npm i https://pkg.pr.new/resend/react-email/@react-email/row@2295

@react-email/section

npm i https://pkg.pr.new/resend/react-email/@react-email/section@2295

@react-email/tailwind

npm i https://pkg.pr.new/resend/react-email/@react-email/tailwind@2295

@react-email/text

npm i https://pkg.pr.new/resend/react-email/@react-email/text@2295

commit: c890e83

@gabrielmfern gabrielmfern force-pushed the feat/new-development-workflow-for-components branch from 0faf2a2 to b63b211 Compare June 16, 2025 14:41
@gabrielmfern gabrielmfern force-pushed the canary branch 3 times, most recently from eb9cb18 to 07e1e07 Compare June 24, 2025 16:30
@gabrielmfern gabrielmfern force-pushed the feat/new-development-workflow-for-components branch from 622f1c9 to 2a16728 Compare June 30, 2025 12:47
gabrielmfern and others added 22 commits June 30, 2025 11:37
@gabrielmfern
fix(preview-server): hot reloading with collapsed directories (#2284)
7717f91
@gabrielmfern
fix(react-email): security issue with path for static files (#2289)
9ee0275
@gabrielmfern @github-actions
@KayleeWilliams @dependabot @bukinoshita
fix(preview-server): forced color-scheme: dark (#2271)
cec0d9b 
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kaylee <65376239+KayleeWilliams@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Bu Kinoshita <6929565+bukinoshita@users.noreply.github.com>
@gabrielmfern
add playground package for writing emails in
636f593
@gabrielmfern
add path alias for _lib/components
9ad0efc
@gabrielmfern
move components to the root
b2048c2
@gabrielmfern
add readme
22cf21d
@gabrielmfern
lint
ed28ae3
@gabrielmfern
fix indenting for tsx in playground's readme
bb8865e
@gabrielmfern
rename dev build scripts to build:watch to avoid confusion
11ec5d1
@gabrielmfern
remove root dev script to avoid confusion
5e6c549
@gabrielmfern
remove build script
cb6766f
@gabrielmfern
update 3.
6a130e8
@gabrielmfern
lint
8aeb629
@gabrielmfern
add explicit file path
4d352a8
@gabrielmfern
fix body import
ca51f7f
@gabrielmfern
fix dev command
3a78e96
@gabrielmfern
ignore directories inside emails too
c7c3c7e
@gabrielmfern
add example.tsx email template
a9cedf7
@gabrielmfern
remove hanging changesets
d8c6109
@gabrielmfern
remove hanging change
01be3cf
@gabrielmfern
lint
c890e83
@gabrielmfern gabrielmfern force-pushed the feat/new-development-workflow-for-components branch from 939f4c3 to c890e83 Compare June 30, 2025 14:37
@gabrielmfern
Copy link
Member Author

gabrielmfern commented Jul 1, 2025

The deployment failed because of a bug in another dependency that has now been fixed, and it is building fine now.

@gabrielmfern gabrielmfern merged commit 72e6cf4 into canary Jul 1, 2025
12 of 16 checks passed
@gabrielmfern gabrielmfern deleted the feat/new-development-workflow-for-components branch July 1, 2025 13:18
gabrielmfern added a commit that referenced this pull request Jul 3, 2025
@gabrielmfern
feat(root): development workflow for all components (#2295)
5c019c2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bukinoshita bukinoshita bukinoshita approved these changes

Assignees

@gabrielmfern gabrielmfern

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@gabrielmfern @bukinoshita @MendyLanda @PedroMarianoAlmeida

Comments